<template>
  <el-button @click="getReservation(0)">已完成</el-button>
  <el-button @click="getReservation(1)">未到期</el-button>
  <el-button @click="getReservation(2)">已到期</el-button>

  <el-table
      :data="this.reservations"
      style="width: 100%"
      stripe
      border
      highlight-current-row
      @current-change="handleCurrentChange"
  >
    <el-table-column prop="projectName" label="项目名称" width="180" />
    <el-table-column prop="petName" label="宠物名称" width="180" />
    <el-table-column prop="time" label="时间" />
    <el-table-column prop="statusStr" label="状态" />
  </el-table>
</template>

<script>
import axios from "axios";

export default {
  name: "AllReservation",
  data(){
    return{
      reservations:[],
    }
  },
  methods:{
    getReservation(status){
      axios.get('http://localhost:8088/reservation/get/status/'+status,{withCredentials:true})
          .then(res => {
            this.reservations = [],
            this.reservations = res.data.data;
          })
    }
  },
  mounted() {
    this.getReservation(0);
  }
}
</script>

<style scoped>

</style>